// 实名审核
<template>
  <div>
    <el-row style="margin-bottom: 8px">
      <el-col :span="21">
        <h3 style="margin: 5px 0px">实名认证申请列表</h3>
      </el-col>
    </el-row>
    <!--<el-card style="margin-bottom: 10px">-->
    <!--&lt;!&ndash;      搜索&ndash;&gt;-->
    <!--<el-row :gutter="20">-->
    <!--<el-col :span="16" style="text-align: right">-->
    <!--<el-radio-group v-model="sortType" @change="sort">-->
    <!--<el-radio  label="time">按时间排序</el-radio>-->
    <!--<el-radio  label="like">按评分排序</el-radio>-->
    <!--</el-radio-group>-->
    <!--&lt;!&ndash;          <el-button class  ="btn" icon="el-icon-sort" @click="sort">按时间排序</el-button>&ndash;&gt;-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</el-card>-->
    <template>
      <el-table :data="applications" border stripe>
        <el-table-column label="用户ID" prop="id" width="70"></el-table-column>
        <el-table-column label="用户名" prop="username" width="150"></el-table-column>
        <el-table-column label="联系电话" prop="phone" width="200"></el-table-column>
        <el-table-column label="真实姓名" prop="name" width="100"></el-table-column>
        <el-table-column label="身份证" prop="number" width="200"></el-table-column>
        <el-table-column label="申请日期" prop="date" width="150"></el-table-column>
        <el-table-column label="处理日期" prop="deal_date" width="150"></el-table-column>
        <el-table-column label="状态" prop="state" width="100"></el-table-column>
        <el-table-column label="操作" width="120">
          <template scope="scope" prop="state">
            <el-button v-if="scope.row.state=='未审核'" @click="onclickDeal(scope.row, scope.$index)">处理</el-button>
            <el-dialog
              title="详情"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose">
              <el-divider content-position="left">用户ID</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.id}}</span>
              <el-divider content-position="left">用户名</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.username}}</span>
              <el-divider content-position="left">联系电话</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.phone}}</span>
              <el-divider content-position="left">真实姓名</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.name}}</span>
              <el-divider content-position="left">身份证号码</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.number}}</span>
              <el-divider content-position="left">申请日期</el-divider>
              <span style="padding-left: 45px">{{applicationOnView.date}}</span>
              <template v-if="applicationOnView.state!=='未审核'">
                <el-divider content-position="left">处理日期</el-divider>
                <span style="padding-left: 45px">{{applicationOnView.deal_date}}</span>
                <el-divider content-position="left">经办人</el-divider>
                <span style="padding-left: 45px">{{applicationOnView.deal_admin}}</span>
                <el-divider content-position="left">审核意见</el-divider>
                <span style="padding-left: 45px">{{applicationOnView.detail}}</span>
              </template>
              <br>
              <template v-if="applicationOnView.state=='未审核'">
                <div style="padding-left: 30px; padding-top: 10px">
                  <el-radio v-model="deal_result" label="未通过">未通过</el-radio>
                  <el-radio v-model="deal_result" label="通过">通过</el-radio>
                </div>
                <div style="padding-left: 30px; padding-top: 10px">
                  <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入审核意见"
                  v-model="deal_detail">
                </el-input>
                </div>
              </template>
              <span slot="footer" class="dialog-footer">
                <el-button v-if="applicationOnView.state=='未审核'" type="primary" @click="handleClose(onDeal)">确 定</el-button>
                <el-button v-else type="primary" @click="handleClose">确 定</el-button>
              </span>
            </el-dialog>
            <el-button v-if="scope.row.state!=='未审核'" @click="onclickLook(scope.row, scope.$index)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="applications_list.length==0">
      <el-card>
        <div><h4>无符合要求的申请信息</h4></div>
      </el-card>
    </template>
    <el-card :body-style="{ padding: '5px' }" >
      <!--    分页区域-->
      <el-pagination
        style="margin: 5px;padding: 0px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.applications_list.length"
        align="center"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import ElButton from 'element-ui/packages/button/src/button'

export default {
  components: { ElButton },
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      dialogVisible: false,
      applications: [],
      applications_list: [
        { id: 100014, username: 'realuser0', phone: '18823467772', name: '用户甲', number: '320623199810088872', date: '2021-05-09', deal_date: '', state: '未审核', deal_admin: '', detail: '' },
        { id: 100015, username: 'realuser1', phone: '18823467773', name: '用户乙', number: '320623199809278982', date: '2021-05-08', deal_date: '', state: '未审核', deal_admin: '', detail: '' },
        { id: 100016, username: 'realuser2', phone: '18823467774', name: '用户丙', number: '320623199809278982', date: '2021-05-07', deal_date: '', state: '未审核', deal_admin: '', detail: '' },
        { id: 100017, username: 'realuser3', phone: '18823467775', name: '用户丁', number: '320623199809278982', date: '2021-05-06', deal_date: '2021-05-07', state: '未通过', deal_admin: 'fn', detail: '不符合事实。' },
        { id: 100018, username: 'realuser4', phone: '18823467776', name: '用户戊', number: '320623199809278982', date: '2021-05-05', deal_date: '2021-05-06', state: '通过', deal_admin: 'fn', detail: '符合事实。' },
        { id: 100019, username: 'realuser5', phone: '18823467777', name: '用户己', number: '320623199809278982', date: '2021-05-04', deal_date: '2021-05-05', state: '通过', deal_admin: 'fn', detail: '符合事实。' },
        { id: 100020, username: 'realuser6', phone: '18823467778', name: '用户庚', number: '320623199809278982', date: '2021-05-03', deal_date: '2021-05-04', state: '通过', deal_admin: 'fn', detail: '符合事实。' },
        { id: 100021, username: 'realuser7', phone: '18823467779', name: '用户辛', number: '320623199809278982', date: '2021-05-02', deal_date: '2021-05-03', state: '通过', deal_admin: 'fn', detail: '符合事实。' },
        { id: 100022, username: 'realuser8', phone: '18823467770', name: '用户壬', number: '320623199809278982', date: '2021-05-01', deal_date: '2021-05-02', state: '通过', deal_admin: 'fn', detail: '符合事实。' }
      ],
      applicationOnView_index: 0,
      applicationOnView: '',
      deal_result: '未通过',
      deal_detail: ''
    }
  },
  created () {
    this.getApplicationPage()
  },
  methods: {
    onclickDeal (row, index) {
      this.applicationOnView = row
      this.applicationOnView_index = index
      this.dialogVisible = true
    },
    onclickLook (row, index) {
      this.applicationOnView = row
      this.applicationOnView_index = index
      this.dialogVisible = true
    },
    onDeal () {
      this.applications[this.applicationOnView_index].deal_date = '2021-06-09'
      this.applications[this.applicationOnView_index].deal_admin = 'root'
      this.applications[this.applicationOnView_index].detail = this.deal_detail
      this.applications[this.applicationOnView_index].state = this.deal_result
    },
    handleClose (done) {
      try {
        done()
      } catch (e) {}
      this.applicationOnView = ''
      this.applicationOnView_index = 0
      this.deal_result = '未通过'
      this.deal_detail = ''
      this.dialogVisible = false
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getApplicationPage()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getApplicationPage()
    },
    getApplicationPage () {
      this.applications = this.applications_list.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, (this.queryInfo.pagenum) * this.queryInfo.pagesize)
    }
  }
}
</script>

<style scoped>
  .movie-card {
    margin-bottom: 15px;
  }

  .cover {
    width: 150px;
    height: 200px;
  }

  .text {
    margin-bottom: 5px;
  }

  .detail {
    display: flex;
    justify-content: flex-end;
  }

  .btn {
    color: white;
    background-color: #07c4a8;
  }
</style>
